<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="个人资料" @click-left="$router.push('/mine')">
        <template #left>
          <van-icon name="arrow-left" size="1rem" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <ul class="listBox">
        <li style="padding:.6rem 0">
          <span>头像</span>
          <div class="avatar" @click="actionSheetData={show:true,title:'修改头像',type:'avatar'}">
            <img
              src="https://uniapp.b2b2c.niuteam.cn/upload/upload/user/haedimg/20200615071617159221977755646.png"
              alt
            />
            <i class="iconfont icon-right" />
          </div>
        </li>
        <li>
          <span>账号</span>
          <div class="right">
            <span>MADAOGCC</span>
            <!-- <i class="iconfont icon-right" /> -->
          </div>
        </li>
        <li>
          <span>密码</span>
          <div class="right" @click="actionSheetData={show:true,title:'修改密码',type:'password'}">
            <span>修改</span>
            <i class="iconfont icon-right" />
          </div>
        </li>
        <li @click="$router.push('/mine/pay-password')">
          <span>支付密码</span>
          <div class="right">
            <span>修改</span>
            <i class="iconfont icon-right" />
          </div>
        </li>
      </ul>

      <ul class="listBox">
        <li>
          <span>手机</span>
          <div class="right">
            <span>15555124010</span>
            <!-- <i class="iconfont icon-right" /> -->
          </div>
        </li>
        <li @click="actionSheetData={show:true,title:'修改邮箱',type:'email'}">
          <span>邮箱</span>
          <div class="right">
            <span>修改</span>
            <i class="iconfont icon-right" />
          </div>
        </li>
      </ul>

      <div class="logoutBtn">
        <button>退出登录</button>
      </div>
    </div>

    <van-action-sheet v-model="actionSheetData.show" :title="actionSheetData.title">
      <div style="text-align:center;" v-if="actionSheetData.type==='avatar'">
        <van-uploader v-model="avatarList" :after-read="afterRead" :max-count="1" />
        <div class="yesBtn">
          <button>确定</button>
        </div>
      </div>
      <my-password v-if="actionSheetData.type==='password'" />
      <my-email v-if="actionSheetData.type==='email'" />
    </van-action-sheet>
  </div>
</template>

<script>
import { NavBar, Icon, ActionSheet, Uploader } from "vant";
import Password from "./password";
import Email from "./email";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-action-sheet": ActionSheet,
    "van-uploader": Uploader,
    // "van-field": Field,
    "my-password": Password,
    "my-email": Email
  },
  data() {
    return {
      actionSheetData: {
        show: false,
        title: "",
        type: ""
      },
      avatarList: []
    };
  },
  methods: {
    afterRead(file) {
      this.avatarList = [
        {
          url: file.content,
          isImage: true
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f7f7f7;
  height: 100%;
  .nav {
    height: 2.3rem;
  }
}
.yesBtn {
  text-align: center;
  padding: 0.4rem 0;
  button {
    width: 80%;
    background-image: linear-gradient(to right, #cf2835, #e64a49);
    padding: 0.4rem 0;
    border-radius: 0.8rem;
    border: none;
    outline: none;
    color: white;
    font-size: 0.7rem;
  }
}

.content {
  box-sizing: border-box;
  height: calc(100% - 2.3rem);
  padding: 0.3rem 0;
  .listBox {
    background-color: white;
    padding: 0 0.6rem;
    margin-bottom: 0.4rem;
    li {
      &:last-child {
        border: none;
      }
      border-bottom: 1px solid #e5e5e5;
      padding: 0.8rem 0;
      font-size: 0.7rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .avatar {
        display: flex;
        align-items: center;
        img {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
        }
        i {
          color: #e5e5e5;
          font-size: 0.6rem;
        }
      }
      .right {
        color: #a3a3a3;
        i {
          color: #e5e5e5;
          font-size: 0.6rem;
        }
      }
    }
  }
  .logoutBtn {
    padding-top: 0.8rem;
    text-align: center;
    button {
      background-image: linear-gradient(to right, #cf2835, #e64a49);
      width: 80%;
      padding: 0.4rem 0;
      border-radius: 0.8rem;
      border: none;
      outline: none;
      color: white;
      font-size: 0.7rem;
    }
  }
}
</style>